<template>
  <div>
    <el-table-form ref="form" :max-cols="4" :model="query">
      <el-form-item label="权益名称:" prop="preferentialPackageName">
        <el-input v-model="query.preferentialPackageName" />
      </el-form-item>
      <el-form-item label="状态:" prop="preferentialPackageStatus">
        <el-select v-model="query.preferentialPackageStatus" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button v-permission="[10020401,1]" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="[10020401,2]" type="primary" style="margin-right: 5px;" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      highlight-current-row
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <addLegal ref="addLegal" @refresh="search" />
  </div>
</template>

<script>
  import { preferentialSelect, preferentialAudit, preferentialDelete } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import addLegal from './addLegal.vue'
  export default {
    components: { addLegal },
    data() {
      return {
        query: {
          preferentialPackageName: '',
          preferentialPackageStatus: ''
        },
        statusOptions: [
          {
            label: '待审核',
            value: 1
          },
          {
            label: '已审核',
            value: 2
          }
        ],
        tableData: {
          data: [],
          column: [
            { type: 'index' },
            { label: '权益名称', prop: 'preferentialPackageName' },
            {
              label: '状态',
              prop: 'preferentialPackageStatus',
              render: (h, { row }) => (
                <span>{row.preferentialPackageStatus && formatColumnMap(this.statusOptions, 'value', row.preferentialPackageStatus, 'label')}</span>
              )
            },
            { label: '最后修改人', prop: 'modifyUser', minWidth: 120 },
            {
              label: '最后修改时间',
              prop: 'modifyTime',
              width: 160,
              render: (h, { row }) => (
                <span>
                {row.modifyTime && parseTime(row.modifyTime, '{y}-{m}-{d} {h}:{i}')}
                </span>
              )
            },
            { label: '审核人', prop: 'auditor' },
            {
              label: '审核时间',
              prop: 'auditTime',
              minWidth: 160,
              render: (h, { row }) => (
                <span>
                {row.auditTime && parseTime(row.auditTime, '{y}-{m}-{d} {h}:{i}')}
                </span>
              )
            },
            {
              label: '上次调整记录',
              prop: 'contactPhone',
              render: (h, { row }) => (
               <el-link v-permission='[10020401,7]' underline={false} onClick={() => this.openRecordDetail(row)}>查看</el-link>
              )
            },
            {
              label: '操作',
              width: 80,
              fixed: 'right',
              render: (h, { row }) => {
                return (
                  <div>
                    <el-dropdown>
                      <span class='el-dropdown-link'>
                        更多<i class='el-icon-arrow-down el-icon--right'></i>
                      </span>
                      <el-dropdown-menu slot='dropdown'>
                        <el-dropdown-item v-permission={[10020401, 3]}>
                          <el-link underline={false} onClick={() => this.openEdit(row)}>编辑</el-link>
                        </el-dropdown-item>
                        <el-dropdown-item v-permission={[10020401, 4]}>
                          {row.preferentialPackageStatus === 1 && (<el-link underline={false} onClick={() => this.handleAudit(row)}>审核</el-link>)}
                        </el-dropdown-item>
                        <el-dropdown-item v-permission={[10020401, 6]}>
                          <el-link underline={false} onClick={() => this.openDetail(row)}>详情</el-link>
                        </el-dropdown-item>
                        <el-dropdown-item v-permission={[10020401, 5]}>
                          {row.preferentialPackageStatus === 1 && (<el-link underline={false} onClick={() => this.handleDelete(row)}>删除</el-link>)}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                )
              }
            }
          ]
        }
      }
    },
    methods: {
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 查看记录
      openRecordDetail(row) {
        this.$refs.addLegal.open({ ...row, type: 'record' })
      },
      // 编辑
      openEdit(row) {
        this.$refs.addLegal.open({ ...row, type: 'edit' })
      },
      // 新增
      add() {
        this.$refs.addLegal.open({ type: 'add' })
      },
      // 审核
      handleAudit(row) {
        preferentialAudit({ preferentialPackageId: row.preferentialPackageId }).then(res => {
          if (res.data) {
            this.$message.success('审核成功')
            this.$refs.lbTable.fetch({ currentPage: 1 })
          }
        })
      },
      // 详情
      openDetail(row) {
        this.$refs.addLegal.open({ ...row, type: 'detail' })
      },
      // 删除
      handleDelete(row) {
        this.$confirm('确认要删除该优惠权益吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          preferentialDelete({ preferentialPackageId: row.preferentialPackageId }).then(res => {
            if (res.data) {
              this.$message.success('删除成功')
              this.$refs.lbTable.fetch({ currentPage: 1 })
            }
          })
        }).catch(() => {})
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          preferentialPackageName: this.query.preferentialPackageName,
          preferentialPackageStatus: this.query.preferentialPackageStatus,
          currentPage,
          pageSize
        }
        const res = await preferentialSelect(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
